<template>
    <div id="app">
        <m-header v-if="!$route.meta.head" :route="$route"></m-header>
        <div class="section" :class="{'section-b':!showFooter,'section-t':$route.meta.head}">
            <transition>
                <keep-alive>
                    <router-view v-if="$route.meta.keepAlive"></router-view>
                </keep-alive>
            </transition>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
        </div>
        <m-footer v-if="showFooter" :route="$route"></m-footer>
    </div>
</template>
<script >
import footer from "./components/Footer";
import header from "./components/Header";
import { mapGetters } from "vuex";

export default {
    name: "app",
    data() {
        return {
            route: ""
        };
    },
    components: {
        "m-footer": footer,
        "m-header": header
    },
    computed: {
        ...mapGetters(["sid"]),
        showFooter() {
            return (
                this.$route.name == "home" ||
                this.$route.name == "/" ||
                this.$route.name == "category" ||
                this.$route.name == "shopping" ||
                this.$route.name == "mine"
            );
        }
    },
    mounted() {
        this.$nextTick(() => {
            if (this.sid) this.$store.dispatch(types.CART_NUM);
        });
    }
};
</script>

<style>
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #f1f1f1;
}

.section {
    position: fixed;
    top: 48px;
    bottom: 50px;
    left: 0;
    right: 0;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

/*.section {*/
/*height: 100%;*/
/*overflow: scroll;*/
/*}*/

.section-b {
    bottom: 0;
}

.section-t {
    top: 0;
}

/*vant*/
</style>
